<template>
	<div class="biddwrap">
    <div class="main-body" :style="{'height':wrapperHeight+'px'}">
     <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :bottomPullText='bottomText' ref="loadmore">
       <!-- :top-method="loadTop" @top-status-change="handleTopChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :bottomPullText='bottomText' ref="loadmore" -->
		<!-- <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"> -->
			<div class="wrapCont" v-show="list.length > 0" :style="{'min-height':wrapperHeightMMin+'px'}">
				<div class="offerList" v-for="(item, index) in list" :key="index">
					<div class="singerBox" >
						<div class="boxTitle clearfix">
							<div class="left fl">运单号：{{item.transBillId}}</div>
							<div class="right fr">{{item.transBillStatusName}}</div>
						</div>
						<div class="addressList" v-for="(addressItem,indexs) in item.addrres" :key="indexs">
							<div class="address clearfix">
								<span class="fl add">{{addressItem.beginSiteProvince | city}}</span>
								<span class="iconTo">&nbsp;</span>
								<span class="fr add">{{addressItem.endSiteProvince | city}}</span>
							</div>
						</div>
						<div class="border">
							<i class="halfLe"></i>
							<i class="halfRi"></i>
						</div>
						<div class="info">
							<div class="up clearfix">
								<div class="left fl">总重量：{{(item.transWeight*1).toFixed(3)}}吨</div>
								<div class="right fr">单价：{{(item.transPrice*1).toFixed(2)}}元／吨
								<span v-show="item.quoteType == 10">(一口价)</span>
								</div>
							</div>
							<div class="down clearfix">
								<div class="left fl">{{item.transBillStatusName}}：<count-down :start-time="item.biddingStartTime" :end-time="item.biddingEndTime" :callback="callback"></count-down></div>
								<div class="right fr">我的报价：{{((item.myTransPrice*1 || 0)).toFixed(2)}}元／吨</div>
							</div>
						</div>
						<mt-button class='btn needsclick' type="primary" size="large" @click.native='toDetail(item.transBillId)'>我要报价</mt-button>
					</div>
				</div>
			</div>
      <div v-show="list.length == 0" class="nullData" :style="{'height':wrapperHeightNull+'px'}">
	        <p>暂无最新数据</p>
      </div>
			<!-- 底部判断是加载图标还是提示“全部加载” -->
			<!-- <div class="more_loading">
				<div v-show="showLoading">
					<mt-spinner type="snake" color="#00ccff" :size="10"></mt-spinner>
					<span>正在加载</span>
				</div>
				<span v-show="showALlLoad">已全部加载</span>
			</div> -->
        <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <span v-show="topStatus === 'loading'">正在刷新...</span>
        </div>
     </mt-loadmore>
		  <!-- <div class="nullData" v-show="loading">
	        <p>暂无最新数据</p>
	    </div> -->

    </div>
    <m-tabbar :child-msg="msg"></m-tabbar>
	</div>
</template>
<script type="text/ecmascript-6">
import ApiService from "@/services/API-servies";
import {
  Tabbar,
  TabItem,
  Cell,
  TabContainer,
  TabContainerItem,
  Button,
  Spinner,
  Loadmore
} from "mint-ui";
import MTabbar from "../foot/Tabbarfoot";
import CountDown from "../public/public.vue";
export default {
  data() {
    return {
      list: [],
      selected: "",
      session: "",
      sessionId: "",
      timeTit: "",
      bidTime: "",
      bidTimeList: [],
      msg: "bidding",
      andrRes: "",
      ande: "",
      iosSession: "",
      iosRes: "",
      busy: true, //默认允许滚动执行loadMore函数
      pageNo: 1, //默认分页为第一页
      pageSize: 10, //默认每页显示8条数据
      flag: false, //默认没有分页,
      showLoading: true,
      showALlLoad: false,
      loading: false,
      allLoaded: false,
      bottomText:'上拉加载更多...',
      topStatus:'',
      wrapperHeight:0,
      wrapperHeightMMin:0,
      wrapperHeightNull:0,
    };
  },
  created() {
    // window.getUserInfo = this.getUserInfo;
    // window.setUserInfo = this.setUserInfo;
  },
  mounted() {
    setTimeout(() => {
      this.loadListFun();

      if (this.$isBrower.isAndroid) {
        //                this.ande = '安卓'
        // this.getUserInfo();
      } else if (this.$isBrower.isIos) {
        this.setIosTitleType();
      }
    }, 1000);
    // this.setSession();
  },
  methods: {
    loadListFun(flag,on) {
      let _this = this;
      ApiService.auction
        .load({
          pageSize: _this.pageSize,
          pageNo: _this.pageNo
        })
        .then(res => {
          if (res.meta.retCode === "0") {
            this.showLoading = true;
            if (flag) {
              //判断是否通过分页
              this.list = this.list.concat(res.data.list); //分页数据追加到这个list里面
              if (res.data.list.length == 0) {
                // this.allLoaded = true;
                //判断数是否加载完成，就让数据截停
                this.busy = true;
                this.showLoading = false;
                this.showALlLoad = true;
              } else {
                this.busy = false;
              }
              this.$refs.loadmore.onBottomLoaded();
            } else {
              this.list = res.data.list;
              this.busy = false;
              if (res.data.list.length == 0 || res.data.list.length < 10) {
                // this.allLoaded = true;
                //判断数是否加载完成，就让数据截停
                this.busy = true;
                this.showLoading = false;
                this.showALlLoad = true;
              }
              if(on){
                _this.$refs.loadmore.onTopLoaded();
              }
            }
            if (this.list.length == 0) {
              this.loading = true;
              this.wrapperHeightNull = document.documentElement.clientHeight - 90;
            }
          } else {
            this.loading = true;
          }
          this.wrapperHeight = this.wrapperHeightMMin = document.documentElement.clientHeight - 60;
          //this.wrapperHeightNull = document.documentElement.clientHeight - 90;
          //   if (res.data.count !== 0) {
          //     this.loadList = res.data.list;
          //     this.selected = res.data.list[0].biddingEndTime;
          //     for (let i in res.data.list) {
          //       this.bidTimeList.push(res.data.list[i].biddingEndTime);
          //     }
          //   }
        });
    },
    loadTop() {
      this.pageNo = 1;
      this.on = true;
      this.loadListFun(false,true);
    },
    loadBottom() {
      this.pageNo++;
      this.loadListFun(true);
    },
    handleTopChange(status) {
      this.topStatus = status;
    },
    loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        this.pageNo++;
        this.loadListFun(true);
      }, 500);
    },
    // setSession(){
    // 	ApiService.session.setSession({
    // 		sessionId:this.sessionId,
    // 		// sessionId:'EE8DD19D5EC75CF14EAFAB7C35610A82',
    // 	}).then((res) =>{
    // 		this.loadListFun();
    // 	});
    // },
    toDetail(transBillId) {
      this.$router.push({
        path: "waybillDetail",
        query: { transBillId: transBillId }
      });
    },
    getUserInfo() {
      app.getUserInfo();
    },
    getUserInfoIos() {
      this.$bridge.registerhandler("JSEcho", (data, responseCallback) => {
        var data = JSON.parse(data);
        this.iosSession = data.sessionId;
        this.iosRes = data;
      });
    },
    clickH5Btn2() {
      alert("start send");
      app.clickH5Btn({
        title: "H5信息",
        msg: "APP成功拿到H5数据"
      });
    },
    setUserInfo(res) {
      this.andrRes = res;
      this.sessionId = res.sessionId;
      this.setSession();
    },
    callback() {
      this.list = [];
      this.loadListFun();
    },
    //ios 设置头部信息
    setIosTitleType() {
      let params = {
        isReturn: false,
        isSearch: false,
        isTitleSegment: false
      };
      this.$bridge.callhandler("needBarButton", params, data => {});
    }
  },
  filters: {
    status(val) {
      if (val == 30) {
        return "待竞价";
      } else if (val == 40) {
        return "参与竞价";
      }
    },
    city(val) {
      var index = val.indexOf("-") + 1;
      return val.substring(index);
    }
  },
  components: {
    MtTabbar: Tabbar,
    MtTabItem: TabItem,
    mtCell: Cell,
    MtTabContainer: TabContainer,
    MtTabContainerItem: TabContainerItem,
    MTabbar,
    MtButton: Button,
    CountDown,
    MtSpinner: Spinner,
    MtLoadmore: Loadmore,
  }
};
</script>

<style lang="less" rel="stylesheet/less">
@import "~common/less/variable";
@import "~common/less/modules/public";
.more_loading {
  text-align: center;
  .mint-spinner-snake {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.biddwrap {
  margin-bottom: 120px;
  .main-body{
    overflow: scroll;
    -webkit-overflow-scrolling:touch;
  }
  // .mint-loadmore{
  //   height: 100%;
  //   .mint-loadmore-content{
  //     height: 100%;
  //     .nullData{
  //       height: 100%
  //     }
  //   }
  // }
  .wrapCont {
    padding: 0;
    .offerList {
      font-size: 28px;
      padding: 10px 20px;
      .singerBox {
        background: #fff;
        padding: 30px;
        padding-bottom: 10px;
        border-radius: 16px;
        box-shadow: 0px 4px 10px 0px rgba(183, 186, 199, 0.5);
        .boxTitle {
          margin-bottom: 12px;
          .left {
            line-height: 48px;
          }
          .right {
            background: #5395ff;
            color: #fff;
            padding: 8px 12px;
            border-radius: 200px;
            font-size: 24px;
            font-weight: 400;
            line-height: 48px;
            border-radius: 28px;
          }
        }
        .address {
          font-size: 32px;
          font-weight: 800;
          position: relative;
          .iconTo {
            display: inline-block;
            width: 60px;
            position: absolute;
            left: 50%;
            background: url(../../common/imgs/iconTo.png) no-repeat center;
            background-size: 100%;
            transform: translateX(-50px);
          }
          .add {
            width: 267px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span {
            font-weight: 800;
          }
        }
        .info {
          font-size: 28px;
          color: #666;
          margin-bottom: 26px;
          .down span {
            color: #ff0505;
          }
        }
        .border {
          border-top: 3px dashed #e8e7e8;
          height: 3px;
          margin: 20px 0;
          position: relative;
          .halfLe {
            display: block;
            position: absolute;
            left: -44px;
            top: -20px;
            width: 40px;
            height: 40px;
            background: url(../../common/imgs/harfLe.png) no-repeat center
              center;
            background-size: contain;
          }
          .halfRi {
            display: block;
            position: absolute;
            right: -44px;
            top: -20px;
            width: 40px;
            height: 40px;
            background: url(../../common/imgs/harfRi.png) no-repeat center
              center;
            background-size: contain;
          }
        }
      }
    }
  }
  .nullData {
    background: #fff;
    padding: 40px;
    p {
      padding-top: 240px;
      background: url(~common/imgs/fach.jpg) no-repeat 50% 0;
      background-size: 240px 220px;
      text-align: center;
      color: #666;
      margin-top: 40%;
      font-size: 26px;
    }
  }
}
.clickH5Btn2 {
  margin-top: 20px;
}
</style>















